<template>
<div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>添加货物类型</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin:10px;background-color:#fff;padding:10px;border-radius:10px">
        <div class="add-goods-type-top">
            <p style="margin:20px">添加货物类型</p>
            <el-button type="primary" @click="add_goods_type">确认添加<i class="el-icon-plus el-icon--right"></i></el-button>
        </div>

        <el-row :gutter="20">
            <el-col :span="16">
                <div class="grid-content bg-purple">
                    <el-form label-width="120px" :label-position="labelPosition" class="demo-ruleForm type-desc" v-if="create_table" size="small">
            
                        <el-form-item label="设备类型 :">
                            <el-select v-model="equipment" placeholder="请选择" style="width:295px;height:30px">
                            <el-option v-for="(item,index) in equipment_list" :key="index" :label="item.equipment_name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='名称 :'>
                            <el-input placeholder='请输入' v-model="goods_type_name" style="width:295px;height:30px"></el-input>
                        </el-form-item>
                        <el-form-item label='延迟开始 :'>
                            <el-input-number v-model="ping_num" controls-position="right" @change="handleChange" :min="0" :max="1275" style="width:295px;height:30px" step=5></el-input-number>
                            <span style="font-size:5px;margin-left:20px"> 最小单位：5分钟,范围 0~1275分钟</span>
                        </el-form-item>
                        <el-form-item label='描述 :'>
                            <el-input placeholder='请填写(选填)' v-model="goods_type_desc" style="width:295px;height:30px"></el-input>
                        </el-form-item>
                        <el-form-item label='记录间隔 :'>
                            <el-input-number v-model="interval" controls-position="right" @change="handleChange" :min="0.5" :max="127.5" style="width:295px;height:30px" step=0.5></el-input-number>
                            <span style="font-size:5px;margin-left:20px"> 最小单位：0.5分钟,范围 05~127.5分钟</span>
                        </el-form-item>
                    </el-form>
                    
                    <el-form label-width="120px" :label-position="labelPosition" class="demo-ruleForm temperature-form" v-if="create_table" size="small">
                        <span>理想温度范围 :</span>
                        <div>
                            <el-input-number
                                v-model="min_temperature" controls-position="right" @change="TemperatureChange_1" :min="-125" :max="1275" size=small>
                            </el-input-number>
                            一
                            <el-input-number
                                v-model="max_temperature" controls-position="right" @change="TemperatureChange_2" :min="-125" :max="1275" size=small>
                            </el-input-number>
                        </div>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-form label-width="120px" :label-position="labelPosition" class="demo-ruleForm alert-form" v-if="create_table" size="small" style="float: right;margin-top:20px">
                        <div style="display:table-cell;height:60px;font-size:12px;font-height:14px;vertical-align:middle;text-align:center;">
                            <span style="margin-left:30px">报警温区 :</span>
                        </div>
                        <hr style="border:none;height:1px;background-color:rgb(230,233,238);"><br>
                        <div class="highcharts-container" ref='mydiv'>
                            <highcharts-component :options="options" :styles="styles" ref="simpleChart"></highcharts-component>
                        </div>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        
        <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6">
            <div class="grid-content bg-purple alert-box">
                <div class="alert-box-top">
                            <span>报警设置-主警报1 :</span><span>启用<el-checkbox v-model="alert_checked_list.alert_checked_1.choice" style="margin-right:10px;margin-left:10px"></el-checkbox></span>
                </div>
                <div v-if="alert_checked_list.alert_checked_1.choice" class="alert-box-form">
                    <el-form label-width="120px" :label-position="labelPosition" class="demo-ruleForm alert-box-form" v-if="create_table" size="small">
            
                        <el-form-item label="报警类型 :">
                            <el-select v-model="alert_checked_list.alert_checked_1.alert_type" placeholder="请选择" style="width:295px;height:30px">
                            <el-option label="单温上限-单个事件" value="单温上限-单个事件"></el-option>
                            <el-option label="单温下限-单个事件" value="单温下限-单个事件"></el-option>
                            <el-option label="单温度范围-累计事件" value="单温度范围-累计事件"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='温度范围 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_1.temperature" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 v-if="alert_checked_list.alert_checked_1.alert_type!='单温度范围-累计事件'"></el-input-number>
                            <span v-if="alert_checked_list.alert_checked_1.alert_type=='单温度范围-累计事件'">
                                <el-input-number v-model="alert_checked_list.alert_checked_1.temperature_min" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                                <el-input-number v-model="alert_checked_list.alert_checked_1.temperature_max" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                            </span></el-form-item>
                        <el-form-item label='阈值 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_1.threshold" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=0.5 size=small style="margin-right:35px"></el-input-number>
                            <el-select v-model="alert_checked_list.alert_checked_1.threshold_type" placeholder="请选择" style="width:130px;height:30px">
                            <el-option label="分钟" value="1"></el-option>
                            <el-option label="小时" value="2"></el-option>
                            <el-option label="天" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple-light alert-box">
                <div class="alert-box-top">
                            <span>报警设置-主警报2 :</span><span>启用<el-checkbox v-model="alert_checked_list.alert_checked_2.choice" style="margin-right:10px;margin-left:10px"></el-checkbox></span>
                </div>
                <div v-if="alert_checked_list.alert_checked_2.choice" class="alert-box-form">
                    <el-form label-width="120px" :label-position="labelPosition" class="demo-ruleForm alert-box-form" v-if="create_table" size="small">
            
                        <el-form-item label="报警类型 :">
                            <el-select v-model="alert_checked_list.alert_checked_2.alert_type" placeholder="请选择" style="width:295px;height:30px">
                            <el-option label="单温上限-单个事件" value="单温上限-单个事件"></el-option>
                            <el-option label="单温下限-单个事件" value="单温下限-单个事件"></el-option>
                            <el-option label="单温度范围-累计事件" value="单温度范围-累计事件"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='温度范围 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_2.temperature" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 v-if="alert_checked_list.alert_checked_2.alert_type!='单温度范围-累计事件'"></el-input-number>
                            <span v-if="alert_checked_list.alert_checked_2.alert_type=='单温度范围-累计事件'">
                                <el-input-number v-model="alert_checked_list.alert_checked_2.temperature_min" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                                <el-input-number v-model="alert_checked_list.alert_checked_2.temperature_max" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                            </span></el-form-item>
                        <el-form-item label='阈值 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_2.threshold" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=0.5 size=small style="margin-right:35px"></el-input-number>
                            <el-select v-model="alert_checked_list.alert_checked_2.threshold_type" placeholder="请选择" style="width:130px;height:30px">
                            <el-option label="分钟" value="1"></el-option>
                            <el-option label="小时" value="2"></el-option>
                            <el-option label="天" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple alert-box">
                <div class="alert-box-top">
                            <span>报警设置-主警报3 :</span><span>启用<el-checkbox v-model="alert_checked_list.alert_checked_3.choice" style="margin-right:10px;margin-left:10px"></el-checkbox></span>
                </div>
                <div v-if="alert_checked_list.alert_checked_3.choice" class="alert-box-form">
                    <el-form label-width="120px" :label-position="labelPosition" class="demo-ruleForm alert-box-form" v-if="create_table" size="small">
            
                        <el-form-item label="报警类型 :">
                            <el-select v-model="alert_checked_list.alert_checked_3.alert_type" placeholder="请选择" style="width:295px;height:30px">
                            <el-option label="单温上限-单个事件" value="单温上限-单个事件"></el-option>
                            <el-option label="单温下限-单个事件" value="单温下限-单个事件"></el-option>
                            <el-option label="单温度范围-累计事件" value="单温度范围-累计事件"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='温度范围 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_3.temperature" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 v-if="alert_checked_list.alert_checked_3.alert_type!='单温度范围-累计事件'"></el-input-number>
                            <span v-if="alert_checked_list.alert_checked_3.alert_type=='单温度范围-累计事件'">
                                <el-input-number v-model="alert_checked_list.alert_checked_3.temperature_min" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                                <el-input-number v-model="alert_checked_list.alert_checked_3.temperature_max" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                            </span></el-form-item>
                        <el-form-item label='阈值 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_3.threshold" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=0.5 size=small style="margin-right:35px"></el-input-number>
                            <el-select v-model="alert_checked_list.alert_checked_3.threshold_type" placeholder="请选择" style="width:130px;height:30px">
                            <el-option label="分钟" value="1"></el-option>
                            <el-option label="小时" value="2"></el-option>
                            <el-option label="天" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-col>
        </el-row>
        
        <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6">
            <div class="grid-content bg-purple alert-box">
                <div class="alert-box-top">
                            <span>报警设置-主警报4 :</span><span>启用<el-checkbox v-model="alert_checked_list.alert_checked_4.choice" style="margin-right:10px;margin-left:10px"></el-checkbox></span>
                </div>
                <div v-if="alert_checked_list.alert_checked_4.choice" class="alert-box-form">
                    <el-form label-width="120px" :label-position="labelPosition" class="demo-ruleForm alert-box-form" v-if="create_table" size="small">
            
                        <el-form-item label="报警类型 :">
                            <el-select v-model="alert_checked_list.alert_checked_4.alert_type" placeholder="请选择" style="width:295px;height:30px">
                            <el-option label="单温上限-单个事件" value="单温上限-单个事件"></el-option>
                            <el-option label="单温下限-单个事件" value="单温下限-单个事件"></el-option>
                            <el-option label="单温度范围-累计事件" value="单温度范围-累计事件"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='温度范围 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_4.temperature" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 v-if="alert_checked_list.alert_checked_4.alert_type!='单温度范围-累计事件'"></el-input-number>
                            <span v-if="alert_checked_list.alert_checked_4.alert_type=='单温度范围-累计事件'">
                                <el-input-number v-model="alert_checked_list.alert_checked_4.temperature_min" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                                <el-input-number v-model="alert_checked_list.alert_checked_4.temperature_max" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                            </span></el-form-item>
                        <el-form-item label='阈值 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_4.threshold" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=0.5 size=small style="margin-right:35px"></el-input-number>
                            <el-select v-model="alert_checked_list.alert_checked_4.threshold_type" placeholder="请选择" style="width:130px;height:30px">
                            <el-option label="分钟" value="1"></el-option>
                            <el-option label="小时" value="2"></el-option>
                            <el-option label="天" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple alert-box">
                <div class="alert-box-top">
                            <span>报警设置-主警报5 :</span><span>启用<el-checkbox v-model="alert_checked_list.alert_checked_5.choice" style="margin-right:10px;margin-left:10px"></el-checkbox></span>
                </div>
                <div v-if="alert_checked_list.alert_checked_5.choice" class="alert-box-form">
                    <el-form label-width="120px" :label-position="labelPosition" class="demo-ruleForm alert-box-form" v-if="create_table" size="small">
            
                        <el-form-item label="报警类型 :">
                            <el-select v-model="alert_checked_list.alert_checked_5.alert_type" placeholder="请选择" style="width:295px;height:30px">
                            <el-option label="单温上限-单个事件" value="单温上限-单个事件"></el-option>
                            <el-option label="单温下限-单个事件" value="单温下限-单个事件"></el-option>
                            <el-option label="单温度范围-累计事件" value="单温度范围-累计事件"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='温度范围 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_5.temperature" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 v-if="alert_checked_list.alert_checked_5.alert_type!='单温度范围-累计事件'"></el-input-number>
                            <span v-if="alert_checked_list.alert_checked_5.alert_type=='单温度范围-累计事件'">
                                <el-input-number v-model="alert_checked_list.alert_checked_5.temperature_min" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                                <el-input-number v-model="alert_checked_list.alert_checked_5.temperature_max" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                            </span></el-form-item>
                        <el-form-item label='阈值 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_5.threshold" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=0.5 size=small style="margin-right:35px"></el-input-number>
                            <el-select v-model="alert_checked_list.alert_checked_5.threshold_type" placeholder="请选择" style="width:130px;height:30px">
                            <el-option label="分钟" value="1"></el-option>
                            <el-option label="小时" value="2"></el-option>
                            <el-option label="天" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple alert-box">
                <div class="alert-box-top">
                            <span>报警设置-主警报6 :</span><span>启用<el-checkbox v-model="alert_checked_list.alert_checked_6.choice" style="margin-right:10px;margin-left:10px"></el-checkbox></span>
                </div>
                <div v-if="alert_checked_list.alert_checked_6.choice" class="alert-box-form">
                    <el-form label-width="120px" :label-position="labelPosition" class="demo-ruleForm alert-box-form" v-if="create_table" size="small">
            
                        <el-form-item label="报警类型 :">
                            <el-select v-model="alert_checked_list.alert_checked_6.alert_type" placeholder="请选择" style="width:295px;height:30px">
                            <el-option label="单温上限-单个事件" value="单温上限-单个事件"></el-option>
                            <el-option label="单温下限-单个事件" value="单温下限-单个事件"></el-option>
                            <el-option label="单温度范围-累计事件" value="单温度范围-累计事件"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='温度范围 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_6.temperature" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 v-if="alert_checked_list.alert_checked_6.alert_type!='单温度范围-累计事件'"></el-input-number>
                            <span v-if="alert_checked_list.alert_checked_6.alert_type=='单温度范围-累计事件'">
                                <el-input-number v-model="alert_checked_list.alert_checked_6.temperature_min" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                                <el-input-number v-model="alert_checked_list.alert_checked_6.temperature_max" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=1 size=small></el-input-number>
                            </span></el-form-item>
                        <el-form-item label='阈值 :'>
                            <el-input-number v-model="alert_checked_list.alert_checked_6.threshold" controls-position="right" @change="handleChange" :min="-127.5" :max="127.5" step=0.5 size=small style="margin-right:35px"></el-input-number>
                            <el-select v-model="alert_checked_list.alert_checked_6.threshold_type" placeholder="请选择" style="width:130px;height:30px">
                            <el-option label="分钟" value="1"></el-option>
                            <el-option label="小时" value="2"></el-option>
                            <el-option label="天" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-col>
        </el-row>
    </div>
</div>
    
</template>
<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
// HighchartsMore(Highcharts)
// HighchartsDrilldown(Highcharts);
// Highcharts3D(Highcharts);


import {get_create_user_get,get_add_goods_type_get,get_equipment_list_get} from './axios_api/api.js'
export default {
    data(){
        return {
            labelPosition: 'left',
            create_table: true,
            equipment_list: [],
            // 货物类型名称
            goods_type_name: '',
            // 设备类型
            equipment: '',
            // 延迟开始时间
            ping_num: 0,
            // 记录间隔
            interval: 0.5,
            // 货物类型描述
            goods_type_desc: '',
            // 理想温度范围
            // 最低温度
            min_temperature: '',
            // 最高温度
            max_temperature: '',
            alert_type: '',
            alert_checked_list: {
                // 内容包括: 
                // temperature    单温度
                // temperature_min,temperature_max    多温度
                // alert_type    选中的类型(上限,下限,多温度)
                // threshold    阈值的数值
                // threshold_type    阈值的类型(1 分钟,2 小时,3 天)
                'alert_checked_1':{'choice':true,'temperature': '','temperature_min': '','temperature_max': '','alert_type': '', 'threshold': '', 'threshold_type': ''},
                'alert_checked_2':{'choice':false,'temperature': '','temperature_min': '','temperature_max': '','alert_type': '', 'threshold': '', 'threshold_type': ''},
                'alert_checked_4':{'choice':false,'temperature': '','temperature_min': '','temperature_max': '','alert_type': '', 'threshold': '', 'threshold_type': ''},
                'alert_checked_5':{'choice':false,'temperature': '','temperature_min': '','temperature_max': '','alert_type': '', 'threshold': '', 'threshold_type': ''},
                'alert_checked_3':{'choice':false,'temperature': '','temperature_min': '','temperature_max': '','alert_type': '', 'threshold': '', 'threshold_type': ''},
                'alert_checked_6':{'choice':false,'temperature': '','temperature_min': '','temperature_max': '','alert_type': '', 'threshold': '', 'threshold_type': ''},
            },
            alert_checked_name: [
                'alert_checked_1','alert_checked_2','alert_checked_3','alert_checked_4','alert_checked_5','alert_checked_6'
            ],

            chart: null,
            options: {
                title: {
                    text: '理想温度范围'
                },
                xAxis: {
                    categories: ['最低温度', '最高温度']
                },
                yAxis: {
                    title: {
                        text: '理想温度范围'
                    },
                    lineWidth: 2,
                    lineColor: '#F33',
                    id: 'temperature-axis'
                },
                series: [{
                    name: '理想温度范围',
                    data: [0, 0],
                    color: '#F33'
                }]
            },
            
            styles: {
              width: 560,
              height: 350
            }
        }
    },
    mounted() {
        this.get_equipment_list()
        
        this.initChart();
    },
    methods: {
        handleChange(value) {
            console.log(value);
        },
        add_goods_type() {
            let alert_data_list = [];
            for(let i = 0; i < this.alert_checked_name.length; i++){
                if(this.alert_checked_list[this.alert_checked_name[i]].choice) alert_data_list.push(this.alert_checked_list[this.alert_checked_name[i]])
            }
            console.log(alert_data_list);
            get_add_goods_type_get({
                'goods_type_name': this.goods_type_name,
                'equipment': this.equipment,
                'ping_num': this.ping_num,
                'interval': this.interval,
                'goods_type_desc': this.goods_type_desc,
                'min_temperature': this.min_temperature,
                'max_temperature': this.max_temperature,
                'alert_data': alert_data_list
                }).then(res => {
                console.log(res)
            })
        },
        get_equipment_list(){
            get_equipment_list_get().then(res => {
                this.equipment_list = res.equipment_list
            })
        },
        initChart() {
            console.log(this.$refs.mydiv);
            this.$refs.mydiv.style.width = (this.styles.width || 822) + 'px';
            this.$refs.mydiv.style.height = (this.styles.height || 397) + 'px';
            this.chart = new Highcharts.Chart(this.$refs.mydiv, this.options);
            this.$refs.simpleChart.chart.series[0].update({
                color: '#000'
            });
        },
        TemperatureChange_1(value) {
            console.log(this.options.series[0].data[0])
            this.options.series[0].data[0] = []
            this.options.series[0].data[0] = value
            this.initChart()
        },
        TemperatureChange_2(value) {
            console.log(this.options.series[0].data[1])
            this.options.series[0].data[1] = value
            this.initChart()

        }
    }
}
</script>

<style scoped>
    .type-desc {
        width: 716px;
        height: 320px;
        border: solid 1px rgb(230,233,238);
        padding: 50px 20px 0 40px;
        margin: 20px;
    }
    .temperature-form {
        width:775px;
        height:70px;
        border: solid 1px rgb(230,233,238);
        margin: 20px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

    }
    .alert-form {
        width: 820px;
        height: 464px;
        border: solid 1px rgb(230,233,238);
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .bg-purple {
        background: #fff;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #fff;
    }
    .alert-box {
        width: 510px;
        height: 380px;
        border: solid 1px rgb(230,233,238);
        background-color: #fff;
        margin-left: -45px;
    }
    .alert-box-top {
        display:table-cell;
        height:60px;
        font-size:12px;
        font-height:14px;
        vertical-align:middle;
        text-align:center;
        border-bottom:solid 1px rgb(230,233,238);
        width:510px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .alert-box-form {
        /* text-align: center; */
        margin: 60px 20px;
    }
    .add-goods-type-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .highcharts-container {
        width: 822px;
        height: 397px;
        padding: 10px;
    }
</style>